<template>
  <PageWrapper v-loading="loading" loading-tip="加载中...">
    <div class="p-4-tag">
      <div class="tag">
        <div class="box">
          <BasicForm @register="registerForm" class="page-form">
            <template #slotBtns class="page-form-slotbtn">
              <div class="btn-box">
                <a-button type="primary" style="margin-left: 10px;margin-right: 10px" @click="addGroup" >选择设备参数</a-button
                >
                <a-button type="primary"   @click="throttleSubmit" :loading="loadingBySearch"
                  >查询</a-button
                >
                <!-- <a-button @click="handleResetFields">重置</a-button> -->
                
              </div>
            </template>
          </BasicForm>
          <div class="line-style">
            <!-- <stackedLine :loading="loading" :seriesVal="seriesVal"  height="380px" /> -->
            <div class="top-item">
                <div
                    class="item"
                    v-for="(item, index) in lineChartArr"
                    :key="index"
                    :class="{ isSelected: item.isSelect }"
                    @click="handleLineFilter(item)"
                >
                    <div
                        class="item-chunk"
                        :style="{
                            background: `${!item.isSelect ? item.color : '#e4e5e6'}`
                        }"
                    ></div>
                    <div class="item-title">{{ item.title }}</div>
                </div>
            </div>
            <policeLinechart
                  :loading="loadingByLinechart"
                  :seriesVal="seriesValByLinechart"
                  height="600px" />
          </div>
          
          <!-- 添加分组 -->
          <div class="bottom">
                    <!-- <div>
                        <a-button type="primary" @click = "addGroup"> 添加分组 </a-button>
                    </div> -->
                    <div class="group-item" v-for="(item,index) in infoData.groupList">
                       <div class="group-item-title">
                            <span class="container-title">
                                {{item.name }}
                            </span>
                            <span class="group-item-btn">
                                <a-button style="margin-right: 10px;" @click="addAttribute(index)">编辑 </a-button>
                                <a-button @click="delgroup(index)"> 删除分组 </a-button>
                            </span>
                       </div>
                       <ul class="group-item-list" v-if="item.attributeList && item.attributeList.length > 0">
                            <li v-for="(litem,lindex) in item.attributeList">
                                {{litem.Name}}
                                <CloseOutlined  class="icon-close" @click="delAttribute(item,lindex)"/>
                            </li>
                       </ul>
                    </div>
                </div>
            </div>

             <!-- 添加属性弹窗 -->
             <modelByAttribute
                class="model"
                :info="attributeForm"
                 @register="register"
                @submit-success="handleUpdateAttribute"
            />
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { useDebounceFn } from '@vueuse/core';
  import checkTag from '/@/components/selectTag/index.vue';
  // import stackedLine from '/@/views/project/home/components/equipmentStackedLine.vue';
  import policeLinechart from '/@/views/project/alertRules/components/policeLinechart.vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { ref, reactive, onBeforeUnmount,onMounted,nextTick } from 'vue';
  import { recorddiagnosisgroup } from '/@/api/hda/index';
  import { useModal } from '/@/components/Modal';
  import { gettagsvalue,getruntimedriverinfo,getequipmentruntimedata,cachediagnosisgroup } from '/@/api/tag/index';
  import modelByAttribute from '/@/views/project/diagnosis/components/modelByAttribute.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import dayjs from 'dayjs';

  let loading = ref(false);
  let loadingByLinechart = ref(false)
  let seriesValByLinechart = reactive({
      seriesData: [] as any, //主要数据
      xAxis: [] as any, //点名称
      legend: [] as any, //标题
      legendSelected: [] as any, //控制显示隐藏
      yAxis: [] as any, //纵轴
  })
  let lineChartArr = reactive([]) as any;
  let weatherData = ref([] as any)
  const selected = reactive<Record<string, boolean>>({});
    let selectIndex = ref(0)
    //添加属性弹窗
    let attributeForm = reactive({
        GroupName: '',
        data: [],
    });
  const [register, { openModal, closeModal }] = useModal();

  let timer;
  let loadingBySearch = ref(false);
  let seriesVal = reactive({
    animation: false,
    height: 'auto',
    legend: {
      data: [],
    },
    dataZoom: [
      {
        type: 'inside',
      },
    ],
    sampling: {
      type: 'lttb',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [],
  });
  let infoData = reactive({
    groupList: [] as any,
    detailData: {} as any,
    realTimeData: [] as any,
  })
  let AssetCode = ref('')
  let driverinfoList = ref([]) as any;
  const schemas: FormSchema[] = [
    {
      field: 'type',
      component: 'RadioGroup',
      label: '诊断类型：',
      colProps: {
        span: 6,
      },
      defaultValue: '1',
      componentProps: {
        options: [
          {
            label: '实时工况',
            value: '1',
          },
          {
            label: '历史工况',
            value: '2',
          },
        ],
        onChange: (e) => {
          let { target } = e;
          if (target.value === '1') setFieldsValue({ times: [] });
        },
      },
    },
    {
      label: '设备编码',
      field: 'AssetCode',
      component: 'ApiSelect',
      colProps: {
        span: 4,
      },
      componentProps: {
        api: getruntimedriverinfo,
        labelField: 'AssetCode',
        valueField: 'AssetCode',
        resultField: 'Name',
        params: [""],
        onChange: (e) => {
          AssetCode.value = e
          let result = driverinfoList.value.filter(item => item.AssetCode.includes(e));
          setFieldsValue({ SearchDeviceName: result[0].Name });
        },
      },

      required: true,
    },
    {
      field: 'SearchDeviceName',
      component: 'Input',
      label: '设备名称：',
      colProps: {
        span: 4,
      },
      componentProps: {
        disabled: true,
      },
    },
    {
      field: 'time',
      component: 'Select',
      label: '查询间隔：',
      colProps: {
        span: 4,
      },
      ifShow: ({ values }) => {
        return +values.type === 1;
      },
      defaultValue: 15000,
      componentProps: {
        options: [
          {
            label: '5秒',
            value: 5000,
          },
          {
            label: '15秒',
            value: 15000,
          },
          {
            label: '30秒',
            value: 30000,
          },
          {
            label: '1分钟',
            value: 60000,
          },
          {
            label: '15分钟',
            value: 900000,
          },
          {
            label: '30分钟',
            value: 1800000,
          },
          {
            label: '1小时',
            value: 3600000,
          },
        ],
      },
      rules: [
        {
          required: true,
          validator: async (_rule, value) => {
            if (!value) {
              /* eslint-disable-next-line */
              return Promise.reject('请选择查询间隔');
            }
            return Promise.resolve();
          },
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'times',
      label: '时间段：',
      component: 'RangePicker',
      componentProps: {
        // 'YYYY-MM-DD HH:mm:ss'
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        placeholder: ['开始时间', '结束时间'],
        showTime: { format: 'HH:mm:ss' },
        ranges: { 现在: [dayjs(), dayjs()] },
      },
      ifShow: ({ values }) => {
        return +values.type === 2;
      },
      colProps: {
        span: 6,
      },
      rules: [
        {
          required: true,
          message: '请选择时间段',
          trigger: ['change', 'blur'],
        },
      ],
    },

    {
      field: 'btns',
      component: 'Input',
      label: '',
      slot: 'slotBtns',
      colProps: {
        span: 4,
      },
    },
  ];
  const { createMessage } = useMessage();
  const [registerForm, { setFieldsValue, validateFields }] = useForm({
    labelWidth: 90,
    schemas: schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  const throttleSubmit = useDebounceFn(handleSubmint, 500);
  // 获取实时诊断
  async function gettagsvalueFn(params) {
    loading.value = true;
    loadingByLinechart.value = true
    try {
        let res = await cachediagnosisgroup([params]);
        let arr = Array.isArray(res) ? res : []
        infoData.realTimeData =  infoData.realTimeData.concat(arr)
        // infoData.realTimeData.push(arr)
          lineChartArr = [];
          // 创建一个对象来存储每个GroupName的颜色
          const groupColors = {};
          // 遍历arr数组，为每个GroupName分配颜色
          const colorList = ['#FF9999','#FF33FF','#66CCFF','#66CCCC','#6699CC','#669900','#6666FF','#6633FF','#999966','#999900','#993399','#993333','#333300','#333366','#009900','#00FF66','#00FFFF','#CCFFFF','#CC0000','#330000'];
          let colorIndex = 0;
          infoData.realTimeData.forEach(item => {
              if (!groupColors[item.GroupName]) {
                  groupColors[item.GroupName] = colorList[colorIndex++ % colorList.length];
              }
              item.color = groupColors[item.GroupName];
          });

          // 将结果提取到lineChartArr中
          Object.keys(groupColors).forEach(groupName => {
              lineChartArr.push({
                  color: groupColors[groupName],
                  title: groupName,
                  isSelect: false
              });
          });
        
          weatherData.value = infoData.realTimeData
          console.log(weatherData.value,'weatherData.value')
          
          queryWeather()
        
    
    } catch (error) {
      loadingByLinechart.value = false
      loading.value = false;
        queryWeather()
    }
    // loading.value = true;
    // let xAxisData = seriesVal.xAxis.data || [];
    // let series = seriesVal.series;
    // try {
    //   let res = await gettagsvalue([params.filter(Boolean)]);
    //   let { Columns = [], Values = [], Times = [] } = res;
    //   let resObj = {};
    //   xAxisData = [...xAxisData, ...Times];
    //   if (Values.length > 0) {
    //     Values.forEach((v, i) => {
    //       resObj[Columns[i]] = v[0];
    //     });
    //     if (series.length === 0) {
    //       for (const key in resObj) {
    //         series.push({
    //           name: key,
    //           type: 'line',
    //           data: resObj[key],
    //         });
    //       }
    //     } else {
    //       series.forEach((element) => {
    //         if (resObj[element.name]) {
    //           element.data = [...element.data, ...resObj[element.name]];
    //         }
    //       });
    //     }
    //     seriesVal.legend.data = Columns;
    //     seriesVal.xAxis.data = xAxisData;
    //     seriesVal.series = series;
    //   }
    //   loading.value = false;
    // } catch (error) {
    //   loading.value = false;
    // }
  }
  // function getSplitInterval(data) {
  //   let maxNum = Math.max(...data);
  //   let max = Math.ceil(maxNum / 35);
  //   if (max === 0 || maxNum <= 60) {
  //     max = 0;
  //   }
  //   return max;
  // }
  // 获取历史诊断
  // async function recorddiagnosisFn(params) {
  //   loading.value = true;
  //   try {
  //     let series = [] as any;
  //     let res = await recorddiagnosis([params]);
  //     let { Columns = [], Values = [] } = res;
  //     let lengthList = [] as any;
  //     if (Columns.length > 0 && Columns.length === Values.length) {
  //       Columns.forEach((element, index) => {
  //         lengthList.push(Values[index].length);
  //         series.push({
  //           name: element,
  //           type: 'line',
  //           data: Values[index],
  //         });
  //       });
  //       seriesVal.legend.data = Columns;
  //       seriesVal.xAxis.axisLabel.interval = getSplitInterval(lengthList);
  //       seriesVal.xAxis.data = null;
  //       seriesVal.series = series;
  //     }

  //     loading.value = false;
  //   } catch (error) {
  //     loading.value = false;
  //   }
  // }
  //处理数据格式
function queryWeather() {
    // 根据poi_code对数据进行分组
    let groupedData = {};
    //属性集合
    let groupKey = {}, groupMap = {};
    infoData.groupList.forEach(one => {
        groupMap[one.name] = {};
        one.attributeList.forEach(o => {
            groupKey[o.Name] = [];
            groupMap[one.name][o.Name] = [];
        });
    });
    console.log(groupKey,'groupKey');
    weatherData.value.forEach((item) => {
        var groupItemKey = groupMap[item.GroupName];
        // 判断当前poi_code是否存在groupedData中，以下是不存在的情况
        if (!groupedData[item.GroupName]) {
            // 不存在则创建一个新的键值对
            
            groupedData[item.GroupName] = {
                Time: [],
                ...groupItemKey,
                color:item.color,
                GroupName: item.GroupName
            };
        }
        
        groupedData[item.GroupName].Time.push(item.Time);
        Object.keys(groupItemKey).forEach(key => {
            groupedData[item.GroupName][key].push([item.Time || null, item[key]===undefined?null: item[key]]); // 处理null值
        });
    });
    console.log(groupedData, '组的数据-------');
    let echartsData = [] as any;
    for (let code in groupedData) {
        var groupItemKey = groupMap[code];
        const temp = {
            name: code,
            Time: groupedData[code].Time,
            color: groupedData[code].color,
            GroupName: groupedData[code].GroupName,
        }
        Object.keys(groupItemKey).forEach(key => {
            temp[key] = groupedData[code][key]
        })

        echartsData.push(temp);
    }
    
   
    let offsetIncrement = 30;
    let startOffset = 20;
    echartsData = echartsData.map((item, index) => ({
        ...item,
        offset: startOffset + index * offsetIncrement
    }));
    console.log(echartsData, '');
    let series = [] as any;
    let yData = [] as any;
    // 动态设置xAxis的data和series
    echartsData.forEach((data,index) => {
        var groupItemKey = groupMap[data.name];
        seriesValByLinechart.xAxis.data = data.Time; // 设置x轴的时间数据（注意：这里可能需要根据实际情况调整，因为所有组的时间可能不一致）
        data.offset = data.offset + 10;
        // 为每个poi_code创建一个series
        Object.keys(groupItemKey).forEach((type) => {
            // console.log(,'data[type]')
            series.push({
                name: `${data.name}:${type}`,
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: data.color
                },
                yAxisIndex: index,
                symbolSize: 6,
                data: data[type],
                connectNulls: true 
            });
        });
        //设置y轴
        yData.push({
            boundaryGap: [0, '50%'],
            axisLine: {
                show: true,
                lineStyle: {
                    color: data.color,
                    }
            },
            axisTick:{
                show: true,
                inside: true
            },
            type: 'value',
            name: data.GroupName,
            position: index % 2 === 0 ? 'left' : 'right', // 根据 index 的奇偶性设置Y轴位置
            offset:  data.offset, //坐标轴距离
            splitLine: {
                show: true,
            },
        })
    });
    loading.value = false;
    loadingByLinechart.value = false
    let aa = weatherData.value.map((item) => item.Time);
    seriesValByLinechart.xAxis = removeDuplicateDates(aa);
    seriesValByLinechart.seriesData = series;
    console.log(seriesValByLinechart.seriesData,'seriesData')
    seriesValByLinechart.yAxis = yData;
    seriesValByLinechart.legend = seriesValByLinechart.seriesData.map((item) => item.name);
   
}
//获取图表数据
async function getGroupDetail(params) {
    loading.value = true;
    loadingByLinechart.value = true
    try {
        let res = await recorddiagnosisgroup([params]);
        let arr = Array.isArray(res) ? res : [];
        lineChartArr = [];
        // 创建一个对象来存储每个GroupName的颜色
        const groupColors = {};
        // 遍历arr数组，为每个GroupName分配颜色
        const colorList = ['#FF9999','#FF33FF','#66CCFF','#66CCCC','#6699CC','#669900','#6666FF','#6633FF','#999966','#999900','#993399','#993333','#333300','#333366','#009900','#00FF66','#00FFFF','#CCFFFF','#CC0000','#330000'];
        let colorIndex = 0;
        arr.forEach(item => {
            if (!groupColors[item.GroupName]) {
                groupColors[item.GroupName] = colorList[colorIndex++ % colorList.length];
            }
            item.color = groupColors[item.GroupName];
        });

        // 将结果提取到lineChartArr中
        Object.keys(groupColors).forEach(groupName => {
            lineChartArr.push({
                color: groupColors[groupName],
                title: groupName,
                isSelect: false
            });
        });
        console.log(lineChartArr,'lineChartArr')
        weatherData.value = arr
        queryWeather()
    
    } catch (error) {
        queryWeather()
    }
}
//控制图表分组显示隐藏
function handleLineFilter(code) {
    loadingByLinechart.value = true
    code.isSelect = !code.isSelect;
    seriesValByLinechart.legendSelected = [];
    let legendData = seriesValByLinechart.legend;
    //选中的组
    let checkedArr = [] as any;
    lineChartArr.forEach((item) => {
        if(item.isSelect){
            checkedArr.push(item.title)
        }
    })
    // console.log(checkedArr)
    for (let item of legendData) {
        // 检查当前元素是否是 obj.title
        let strName = item.split(':')[0]
        if(checkedArr.includes(strName)){
            // 如果包含，则添加到 result 对象中，并设置值为 false
            selected[item] = false;
        }else{
            selected[item] = true;
        }
    }
    // console.log(selected)
    lineChartArr.forEach((item) => {
        if (item.title === code.title) {
            item.isSelect = code.isSelect;
        }
    });
    nextTick(()=>{
        loadingByLinechart.value = false
        seriesValByLinechart.legendSelected.push(selected);
        console.log(seriesValByLinechart.legendSelected);
    })
    
}
  function removeDuplicateDates(dates) {
      // 使用 Set 来自动去除重复项
      const uniqueDates = new Set(dates);
      // 将 Set 转换回 Array
      return Array.from(uniqueDates);
  }
  // 轮询
  async function getDateByTimer(params, time) {
    timer = setInterval(() => {
      gettagsvalueFn(params);
    }, time);
  }
  // 查询按钮事件
  async function handleSubmint() {
    if (timer) clearInterval(timer);
    seriesVal.xAxis.data = [];
    seriesVal.series = [];

    let res = await validateFields();
    if(infoData.groupList.length === 0){
      createMessage.error('请选择设备参数');
      return;
    }
    // loadingByLinechart.value = false
    let _GroupInfos = [] as any
    _GroupInfos = infoData.groupList.map(group => ({
        Name: group.name,
        AttributeList: group.attributeList.map(attr => attr.FullName)
    }));
    if (res.type === '1') {
      gettagsvalueFn({GroupInfos:_GroupInfos})
      getDateByTimer({GroupInfos:_GroupInfos}, res.time);
    } else if (res.type === '2') {
      let StartTime = Array.isArray(res.times) ? res.times[0] : '';
      let EndTime = Array.isArray(res.times) ? res.times[1] : '';
      getGroupDetail({StartTime,EndTime,GroupInfos:_GroupInfos})
    }
  }
  //获取设备编码列表
  async function getDriverinfo() {
    try {
        let res = await getruntimedriverinfo([""]);
        if(res){
          driverinfoList.value = res
        }
    
    } catch (error) {
        
    }
  }
  // 选择参数事件
  function handleCheckTag(val) {
    let resList = val.val;
    setFieldsValue({ TagFullName: resList });
  }
  // 重置查询表单
  function handleResetFields() {
    setFieldsValue({
      AssetCode: '',
      TagFullName: [],
      times: [],
    });
    setFieldsValue({ SearchDeviceName: '' });
    // clearEchart()
    
  }
  //置空图表数据
  // function clearEchart() {
  //   nextTick(()=>{
  //     loadingByLinechart.value = false;
  //     seriesValByLinechart.seriesData = [];
  //     seriesValByLinechart.xAxis = [];
  //     seriesValByLinechart.legend = [];
  //     seriesValByLinechart.legendSelected = [];
  //     seriesValByLinechart.yAxis = [];
  //   })
    
  // }
  //添加设备参数
  async function addGroup(){
      if(AssetCode.value === ''){
        createMessage.error('请先选择设备编码');
        return;
      }
      let params = [] as any
      params.push(AssetCode.value)
      try {
        let res = await getequipmentruntimedata(params);
          if(res){
            infoData.detailData.TagList = res
            let num = infoData.groupList.length + 1
            let obj = {
                name:'分组'+ num,
                attributeList:[]
            }
            infoData.groupList.push(obj)
            addAttribute(infoData.groupList.length-1)
          }
        
        } catch (error) {
            
        }
      
  }
  //删除分组
  function delgroup(index){
      infoData.groupList.splice(index,1)
      handleSubmint()
  }
  //删除单个属性
  function delAttribute(item,index){
      item.attributeList.splice(index,1)
      handleSubmint()
  }
  //添加属性弹窗
  function addAttribute(index){
      attributeForm.GroupName = infoData.groupList[index].name
      attributeForm.data = filterTag()
      selectIndex.value = index
      openModal()
  }
  //属性弹窗关闭
  function handleUpdateAttribute(data){
      const {GroupName,checkedList} = data
      let _attributeList = infoData.groupList[selectIndex.value].attributeList;
      let matchedTags = infoData.detailData.TagList.filter(tag => checkedList.includes(tag.FullName));
      let combinedTags = _attributeList.concat(matchedTags);
      infoData.groupList[selectIndex.value].attributeList = combinedTags;
      infoData.groupList[selectIndex.value].name = GroupName
      console.log(infoData.groupList)
      closeModal()
      handleSubmint()
  }
  //过滤已存在的属性
  function filterTag(){
      let filteredTagList = []
      let _TagList= JSON.parse(JSON.stringify(infoData.detailData.TagList)) 
      console.log(infoData.groupList)
      console.log(_TagList)
      // 提取 list 中所有的 FullName
      let existingKeys = infoData.groupList.flatMap(item => item.attributeList).map(attr => attr.FullName);
      // 过滤掉 _TagList 中已经存在的 FullName
      filteredTagList = _TagList.filter(tag => !existingKeys.includes(tag.FullName));
      return filteredTagList
  }
  onMounted(async () => {
    getDriverinfo()
    
})
  onBeforeUnmount(() => {
    // 页面销毁之前，清除定时器和缓存数据
    if (timer) clearInterval(timer);
  });
</script>

<style scoped lang="less">
  .p-4-tag {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    .tag {
      // position: relative;
      // height: 100%;
      // overflow: hidden;
      // height: auto;
      padding: 15px;
      background-color: #fff;
      ::v-deep(.ant-col-14){
        margin: 10px 0;
      }
      .pagination-box {
        z-index: 9;
        padding: 10px 5px;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
      }
    }
    .btn-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    ::v-deep(.slot-select){
      background-color: transparent;
    }
  }
 
  // .box {
  //   display: flex;
  //   flex-direction: column;
  //   position: absolute;
  //   top: 1rem;
  //   left: 1rem;
  //   right: 1rem;
  //   bottom: 1rem;
  //   box-sizing: border-box;
  //   // background-color: #fff;
  // }

  .line-style {
    height: 620px;
  }
  .bottom{
      min-height: 200px;
      margin-top: 10px;
      padding-bottom: 20px;
      .group-item-title{
          position: relative;
          height: 48px;
          line-height: 45px;
          border-bottom: 1px solid #C0C4CC;
      }
      .group-item-btn{
          position: absolute;
          right: 0;
      }
      .group-item-list{
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
      }
      .group-item-list>li{
          width: 180px;
          line-height: 30px;
          border: 1px solid #3796EC;
          border-radius: 3px;
          color: #3f3f40;
          font-size: 12px;
          font-weight: 600;
          margin-right: 15px;
          padding-left: 8px;
          position: relative;
      }
      .group-item-list>li:before{
          content: "";
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #9E9E9E;
          border-radius: 50%;
          margin-right: 3px;
      }
      .icon-eye{
          position: relative;
          top: 2px;
          color: #646464;
          cursor: pointer;
      }
      .icon-close{
          position: absolute;
          position: absolute;
          right: 4px;
          top: 9px;
          cursor: pointer;
      }
  }
  .container-title{
      font-size: 14px;
      font-weight: 700;
      position: relative;
      padding-left: 8px
  }
  .container-title:before {
      content: "";
      background-color: #3796EC;
      width: 3px;
      height: 18px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -8px;
  }
  .top-item {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 10px 0px 10px;
      .item {
          display: flex;
          margin: 0 10px;
          cursor: pointer;
      }
  }
  .item-chunk {
      height: 13px;
      width: 26px;
      margin-top: 3px;
      margin-right: 5px;
  }
  .page-form{
    position: relative;
    .page-form-slotbtn{
      position: absolute
    }
  }
</style>
